<template>
    <common-dialog :title="title" :base-dialog="roleDialog">
        <div slot="body">
            {{showData}}
            <el-form :model="postion_dialog" :rules="rules" ref="postion_dialog" size="mini" label-width="120px" slot="body" class="form-upload-postion">
                <el-form-item label="专业名称" prop="name">
                    <el-input v-model="postion_dialog.name" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="APP图标" prop="icon">
                    <img width="100%" :src="postion_dialog.icon" alt=""  class="avatar">
                   <el-upload
                    class="avatar-uploader"
                    :action="upload"
                    :with-credentials="true"
                    accept="image/*"
                    list-type="picture-card"
                    :show-file-list="false"
                    :on-success="handleAvatarAPPSuccess"
                    :before-upload="beforeAvatarUpload"
                  >
                    <i class="el-icon-plus avatar-uploader-icon fs16"></i>
                    </el-upload>
                 
                   
                </el-form-item>

                <el-form-item label="PC图标" prop="icon_pc">
                    <img width="100%" :src="postion_dialog.icon_pc" alt=""  class="avatar">
                   <el-upload
                    class="avatar-uploader"
                     :with-credentials="true"
                    accept="image/*"
                    :show-file-list="false"
                   :action="upload"
                    :on-success="handleAvatarPCSuccess"
                    list-type="picture-card"
                    :before-upload="beforeAvatarUpload"
                  >
                    <i class="el-icon-plus avatar-uploader-icon fs16"></i>
                    </el-upload>
                </el-form-item>

                <el-form-item label="所属经纪商" prop="agent_num">
                   <el-select placeholder="" v-model="postion_dialog.agent_num">
                        <el-option label="睿汇" value="AG001"></el-option>
                        <el-option label="富德" value="AG002"></el-option>
                        <el-option label="V汇" value="AG003"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="货币单位" prop="dentifier">
                    <el-select placeholder="" v-model="postion_dialog.currency_name">
                        <el-option label="人民币" value="人民币"></el-option>
                        <el-option label="美元" value="美元"></el-option>
                        <el-option label="日元" value="日元"></el-option>
                        <el-option label="欧元" value="欧元"></el-option>
                        <el-option label="英镑" value="英镑"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="专业状态" prop="status">
                    <el-select placeholder="" v-model="postion_dialog.status">
                        <el-option label="停用" value="0"></el-option>
                        <el-option label="启用" value="1"></el-option>
                    </el-select>
                </el-form-item>
               
                <el-form-item label="非时倒计时" prop="count_down">
                    <el-input v-model="postion_dialog.count_down" :maxlength="11" auto-complete="off"></el-input>
                </el-form-item>
             
                <el-form-item label="" style="width:400px;">
                    <el-button type="primary" @click="addAndEditMenu('postion_dialog')">确定</el-button>
                    <el-button type="primary" @click="cancelDialog('postion_dialog')">取消</el-button>
                </el-form-item>
            </el-form>
        </div>
    </common-dialog>
</template>

<style scoped>
.avatar-uploader {
  float: left;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar {
  width: 48px;
  height: 48px;
  display: block;
  float: left;
  margin-right: 10px;
}
</style>

<script>
import service from "@/service/index_c";
import commonDialog from "@/components/Common/CommonDialog";
import { mapGetters } from "vuex";
export default {
  props: {
    roleDialog: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ""
    },
    editData: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      dialogVisible: false,
      upload: service.haibeiServerUpload(),
      postion_dialog: {
        id: "",
        name: "",
        currency_name: "美元",
        icon: "",
        status: "0",
        count_down: '0',
        agent_num: "",
        icon_pc: "",
        agent_name: ""
      },
      rules: {
        name: [{ required: true, message: "请输入专业名称", trigger: "blur" }],
        icon: [{ required: true, message: "请上传APP图标", trigger: "blur" }],
        icon_pc: [{ required: true, message: "请上传PC图标", trigger: "blur" }],
        count_down: [
          {
            required: true,
            message: "请输入非时倒计时",
            trigger: "blur"
          },
          {
            pattern: /\d+$/,
            message: "请输入数字",
            trigger: "blur"
          }
        ]
      }
    };
  },

  computed: {
    showData() {
      this.postion_dialog = Object.assign({},this.editData);
    }
  },
  components: {
    commonDialog
  },
  methods: {
    
    //上传app
    handleAvatarAPPSuccess(res, file) {
       this.postion_dialog.icon=res.url
    },
    //上传pc
    handleAvatarPCSuccess(res, file) {
       this.postion_dialog.icon_pc=res.url
    },

    beforeAvatarUpload(file) {
      const isJPG = file.type;
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG.indexOf("image") < 0) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    cancelDialog(formName) {
      this.$emit("cancelAndClick", false);
      this.$refs[formName].resetFields();
    },
    addAndEditMenu(formName) {
      this.$refs[formName].validate(valide => {
        if (valide) {
          let params = this.postion_dialog;
          this.$emit("addAndClick", params);
        }
      });
    }
  }
};
</script>
